<template>
    <div class="common-layout">
        <div class="bgcolor"></div>
        <el-container>
            <!-- 顶部 -->
            <el-header class="header">
                <div class="logo">
                    <img src="@/assets/img/logo.jpg" alt="" />
                    <h1>中信银行实习平台后台管理系统</h1>
                </div>
                <div class="author">
                    <el-image
                        style="
                            width: 24px;
                            height: 24px;
                            margin-right: 7px;
                            border-radius: 50%;
                        "
                        :src="MeInfo.avatar_url"
                        fit="cover"
                    />
                    <div>{{ MeInfo.userName }}</div>
                    <button>{{ MeInfo.roleName }}</button>
                </div>
            </el-header>

            <el-container>
                <!-- 侧边栏 -->
                <div class="fill"></div>
                <el-aside
                    class="aside"
                    :style="{
                        'min-width': asideWidth,
                        'max-width': asideWidth,
                    }"
                >
                    <el-menu
                        :default-active="route.path"
                        class="el-menu-vertical-demo"
                        text-color="#000000d9"
                        router
                        background-color="rgba(255,255,255,0.1)"
                        :collapse="pinia.isCollapse"
                    >
                        <el-menu-item
                            :index="item.path"
                            v-for="item in list"
                            :key="item.path"
                            class="menuItem"
                            :style="{
                                'margin-bottom': menuItemMB,
                            }"
                        >
                            <el-icon :size="iconSize">
                                <House v-if="item.meta.icon == 'House'" />
                                <User v-if="item.meta.icon == 'User'" />
                                <Service v-if="item.meta.icon == 'Service'" />
                                <Tickets v-if="item.meta.icon == 'Tickets'" />
                                <Memo v-if="item.meta.icon == 'Memo'" />
                                <Discount v-if="item.meta.icon == 'Discount'" />
                                <MessageBox
                                    v-if="item.meta.icon == 'MessageBox'"
                                />
                                <Collection
                                    v-if="item.meta.icon == 'Collection'"
                                />
                                <PieChart v-if="item.meta.icon == 'PieChart'" />
                                <View v-if="item.meta.icon == 'View'" />
                                <Phone v-if="item.meta.icon == 'Phone'" />
                                <DocumentChecked
                                    v-if="item.meta.icon == 'DocumentChecked'"
                                />
                                <Picture v-if="item.meta.icon == 'Picture'" />
                                <Help v-if="item.meta.icon == 'Help'" />
                            </el-icon>
                            <span>{{ item.meta.title }}</span>
                        </el-menu-item>
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon :size="iconSize"><setting /></el-icon>
                                <span>系统内容管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item
                                    v-for="i in settingList"
                                    :key="i.path"
                                    :index="i.path"
                                >
                                    <span>{{ i.meta.title }}</span>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <!-- 内容区 -->
                <el-container
                    class="mainBox"
                    :style="{
                        width: 'calc(100vw - ' + asideWidth + ')',
                        left: asideWidth,
                    }"
                >
                    <div class="flexBall" @click="openAside">
                        <el-icon v-if="pinia.isCollapse"><ArrowRightBold /></el-icon>
                        <el-icon v-else><ArrowLeftBold /></el-icon>
                    </div>
                    <!-- 页面主体 -->
                    <el-main><router-view /></el-main>
                    <!-- 页面底部 -->
                    <el-footer class="footer">
                        <div class="Copyright">© 2024 中信银行实习平台</div>
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script setup >
import { onBeforeUnmount, onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getMe } from "@/network/Main";
import { useIsCollapseStore } from "@/store/pinia";

const router = useRouter();
const route = useRoute();

// 全局状态
const pinia = useIsCollapseStore();
// 后台左侧菜单栏列表
const list = router.getRoutes().filter((v) => v.meta.isShow);
const settingList = router.getRoutes().filter((v) => v.meta.isSetting);

// 左侧菜单栏的展开与缩放
// const isCollapse = ref(false);
// 左侧菜单栏的宽度
const asideWidth = ref("256px");
// 左侧菜单栏每项
const menuItemMB = ref("8px");
// 左侧菜单栏每项图标
const iconSize = ref("15px");
const openAside = () => {
    pinia.isCollapse = !pinia.isCollapse;
    if (pinia.isCollapse) {
        asideWidth.value = "64px";
        iconSize.value = "20px";
        menuItemMB.value = "3px";
    } else {
        asideWidth.value = "256px";
        iconSize.value = "15px";
        menuItemMB.value = "8px";
    }
};

// 防抖
const debounce = (fn, delay) => {
    let timer;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn();
        }, delay);
    };
};
// 响应式变化,resize事件
const resizeInnerWidth = () => {
    if (window.innerWidth <= 992) {
        console.log(asideWidth.value);
        if (asideWidth.value == "256px") {
            openAside();
        }
    } else {
        if (asideWidth.value != "256px") {
            openAside();
        }
    }
};
const cancalDebounce = debounce(resizeInnerWidth, 200);

onMounted(() => {
    getMeInfo();
    resizeInnerWidth();
    window.addEventListener("resize", cancalDebounce);
});

onBeforeUnmount(() => {
    window.removeEventListener("resize", cancalDebounce);
});
// 获取当前登录用户信息
const MeInfo = ref({
    avatar_url: "",
    userName: "admin",
    roleName: "总行管理员",
});
const getMeInfo = async () => {
    await getMe().then((res) => {
        const data = res.data.data;
        MeInfo.value = {
            avatar_url: data.avatar_url,
            userName: data.username,
            roleName: data.admin_role.name,
        };
        // console.log(MeInfo.value);
    });
};
</script>

<style lang="scss" scoped>
.bgcolor {
    width: 100%;
    height: 100%;
    background: transparent linear-gradient(#ffffff, hsl(220, 23%, 97%) 28%);
    position: fixed;
    z-index: -1;
}
.common-layout {
    // position: relative;
    .header {
        width: 100%;
        height: 56px;
        border: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        position: fixed;
        // z-index: 100;
        background: rgba(255, 255, 255, 0.6) !important;
        backdrop-filter: blur(10px);

        .logo {
            display: flex;
            align-items: center;
            white-space: nowrap;
            img {
                height: 100%;
            }
            h1 {
                font-size: 18px;
                color: #000;
                margin-left: 5px;
            }
        }
        .author {
            display: flex;
            align-items: center;
            width: 12%;
            min-width: 160px;
            div {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            button {
                border: 1px solid var(--color-high-text);
                background-color: #e6f7ff;
                padding: 3px 7px;
                margin: 0 6px;
                color: var(--color-high-text);
                font-size: 12px;
                white-space: nowrap;
            }
        }
    }
    .aside {
        //'min-width': asideWidth,
        //'max-width': asideWidth,
        transition: min-width 0.3s;
        transition: max-width 0.3s;
        height: calc(100vh - 56px);
        background: transparent;
        border-right: 1px solid var(--border-color);
        position: fixed;
        top: 56px;
        z-index: 10;
        overflow-x: hidden;
        .el-menu {
            margin-top: 4px;
            border: none;
            background: transparent !important;
            .menuItem {
                height: 40px;
                line-height: 40px;
                // margin-bottom: 8px;
                transition: margin-bottom 0.3s;
                .el-icon {
                    margin-right: 2px;
                    transition: font-size 0.3s;
                }
            }
            .el-menu-item:hover {
                color: var(--color-high-text);
                background: none;
            }
            .el-menu-item.is-active {
                background: #e6f7ff;
            }
            :deep(.is-active):hover {
                color: var(--color-text);
            }
            .el-sub-menu.is-active {
                :deep(.el-sub-menu__title) {
                    color: var(--color-high-text);
                }
                :deep(.el-sub-menu__title):hover {
                    background: none;
                }
            }
            // 系统内容
            .el-sub-menu {
                :deep(.el-sub-menu__title) {
                    height: 40px !important;
                }
                :deep(.el-menu-item-group__title) {
                    display: none !important;
                }
            }
        }
    }
    .mainBox {
        transition: width 0.3s;
        transition: left 0.3s;
        // width: calc(100vw - 226px);
        position: fixed;
        // height: 84vh;
        height: calc(100vh - 56px);
        // left: 226px;
        top: 56px;
        background: transparent;
        z-index: 90;

        .flexBall {
            width: 24px;
            height: 24px;
            position: absolute;
            top: 16px;
            inset-inline-start: -13px;
            z-index: 102 !important;
            border-radius: 50%;
            text-align: center;
            line-height: 24px;
            color: rgba(0, 0, 0, 0.25);
            font-size: 10px;
            background: #ffffff !important;
            box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05),
                0 1px 4px -1px rgba(25, 15, 15, 0.07),
                0 0 1px 0 rgba(0, 0, 0, 0.08);
        }
        .flexBall:hover {
            color: #595959;
        }

        .el-main {
            --el-main-padding: 0;
        }
        .footer {
            width: 100%;
            background: transparent;
            color: #000;
            height: 60px;
            line-height: 60px;
            z-index: 20;
            // position: fixed;
            bottom: 0;
            // left: 50%;
            // right: 50%;
            display: flex;
            justify-content: center;
            .Copyright {
                width: 164px;
                text-align: center;
            }
        }
    }
}
</style>